import React, { Component } from 'react'

export default class App extends Component {
  state = {
    count: 1,
  }
  render() {
    console.log('render')
    return (
      <div>
        <span>{this.state.count}</span>
        <button type="button" onClick={this.handleClick1}>
          add1
        </button>
        <button type="button" onClick={this.handleClick2}>
          add2
        </button>
        <button type="button" onClick={this.handleClick3}>
          add3
        </button>
      </div>
    )
  }

  handleClick1 = () => {
    // 1. 修改state
    this.setState({
      count: this.state.count + 1,
    })

    console.log('count1', this.state.count)

    this.setState({
      count: this.state.count + 1,
    })

    console.log('count2', this.state.count)

    this.setState({
      count: this.state.count + 1,
    })

    console.log('count3', this.state.count)
  }

  handleClick2 = () => {
    setTimeout(() => {
      // 1. 修改state
      this.setState({
        count: this.state.count + 1,
      })

      console.log('count1', this.state.count)

      this.setState({
        count: this.state.count + 1,
      })

      console.log('count2', this.state.count)

      this.setState({
        count: this.state.count + 1,
      })

      console.log('count3', this.state.count)
    }, 0)
  }

  handleClick3 = () => {
    // 1. 修改state
    this.setState(
      {
        count: this.state.count + 1,
      },
      () => {
        // 状态和正式dom 更新已完成
        console.log('count1', this.state.count)
      }
    )
    this.setState(
      {
        count: this.state.count + 1,
      },
      () => {
        console.log('count2', this.state.count)
      }
    )
    this.setState(
      {
        count: this.state.count + 1,
      },
      () => {
        console.log('count3', this.state.count)
      }
    )
  }
}

/**
 * 18之前，
 * setState 在同步逻辑中，为异步更新状态和dom
 *          在异步逻辑中，为同步更新状态和dom
 * 18开始
 * setState 异步更新状态，更新真是dom
 * setState 合并处理
 * setState 接受第二个参数回调函数，状态和真是dom 更新完成后触发
 */
